<template>
  <Codemirror
    v-model:value="codeText"
    :options="cmOptions"
    class="cm-component"
    @change="onChange"
    :border="true"
    width="100%"
    :height="props.height ? props.height : '400px'"
    ref="editor"
  >
  </Codemirror>
</template>

<script setup>
import Codemirror from 'codemirror-editor-vue3';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css';
import { Editor, EditorConfiguration } from 'codemirror';
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  readOnly: {
    type: Boolean,
    default: false
  },
  height: {
    type: String,
    default: ''
  }
});
const codeText = ref('');
watch(
  () => props.modelValue,
  (val) => {
    codeText.value = val;
  }
);
const emits = defineEmits(['update:modelValue']);
/**codemirror配置项 */
const cmOptions = reactive({
  mode: 'javascript',
  lineNumbers: true,
  lineWiseCopyCut: true,
  lint: true
});

const onChange = (val) => {
  emits('update:modelValue', val);
};
const editor = ref(null);

onMounted(() => {
  nextTick(() => {
    editor.value?.refresh();
    codeText.value = props.modelValue;
  });
});
</script>

<style lang="scss" scoped>

</style>
